@(state: String,
  milestones: List[(gitbucket.core.model.Milestone, Int, Int)],
  repository: gitbucket.core.service.RepositoryService.RepositoryInfo,
  hasWritePermission: Boolean)(implicit context: gitbucket.core.controller.Context)
@import gitbucket.core.view.helpers
@gitbucket.core.html.main(s"Milestones - ${repository.owner}/${repository.name}"){
  @gitbucket.core.html.menu("milestones", repository){
    @if(context.loginAccount.isDefined){
      <div class="pull-right" style="margin-bottom: 10px;">
        <a class="btn btn-success" href="@helpers.url(repository)/issues/milestones/new">New milestone</a>
      </div>
    }
    <table class="table table-bordered table-hover table-issues">
      <thead>
        <tr>
          <th>
            <a class="button-link@if(state == "open"){ selected}" href="?state=open">
              @milestones.count(_._1.closedDate.isEmpty) Open
            </a>&nbsp;&nbsp;
            <a class="button-link@if(state == "closed"){ selected}" href="?state=closed">
              @milestones.count(_._1.closedDate.isDefined) Closed
            </a>
          </th>
        </tr>
      </thead>
      <tbody>
        @defining(milestones.filter { case (milestone, _, _) =>
          milestone.closedDate.map(_ => state == "closed").getOrElse(state == "open")
        }){ milestones =>
          @milestones.map { case (milestone, openCount, closedCount) =>
          <tr>
            <td style="padding-top: 15px; padding-bottom: 15px;">
              <div class="milestone row">
                <div class="col-md-4">
                  <a href="@helpers.url(repository)/milestone/@milestone.milestoneId" class="milestone-title">@milestone.title</a>
                  <div>
                    @if(milestone.closedDate.isDefined){
                      <span class="muted">Closed @gitbucket.core.helper.html.datetimeago(milestone.closedDate.get)</span>
                    } else {
                      @milestone.dueDate.map { dueDate =>
                        @if(helpers.isPast(dueDate)){
                          <i class="octicon octicon-alert" style="color:#BD2C00;"></i>
                          <span class="muted milestone-alert">Due by @helpers.date(dueDate)</span>
                        } else {
                          <span class="muted">Due by @helpers.date(dueDate)</span>
                        }
                      }.getOrElse {
                        <span class="muted">No due date</span>
                      }
                    }
                  </div>
                </div>
                <div class="col-md-8">
                  @gitbucket.core.issues.milestones.html.progress(openCount + closedCount, closedCount)
                  <div>
                    <div>
                      @if(closedCount == 0){
                        0%
                      } else {
                        @((closedCount.toDouble / (openCount + closedCount).toDouble * 100).toInt)%
                      } <span class="muted">complete</span> &nbsp;&nbsp;
                      @openCount <span class="muted">open</span> &nbsp;&nbsp;
                      @closedCount <span class="muted">closed</span>
                    </div>
                    <div class="milestone-menu">
                      @if(hasWritePermission){
                        <a href="@helpers.url(repository)/issues/milestones/@milestone.milestoneId/edit">Edit</a> &nbsp;&nbsp;
                        @if(milestone.closedDate.isDefined){
                          <a href="@helpers.url(repository)/issues/milestones/@milestone.milestoneId/open">Open</a> &nbsp;&nbsp;
                        } else {
                          <a href="@helpers.url(repository)/issues/milestones/@milestone.milestoneId/close">Close</a> &nbsp;&nbsp;
                        }
                        <a href="@helpers.url(repository)/issues/milestones/@milestone.milestoneId/delete" class="delete">Delete</a>
                      }
                    </div>
                  </div>
                </div>
              </div>
              @milestone.description.map { description =>
                <div class="milestone-description markdown-body">
                  @helpers.markdown(
                    markdown         = description,
                    repository       = repository,
                    branch           = repository.repository.defaultBranch,
                    enableWikiLink   = false,
                    enableRefsLink   = false,
                    enableLineBreaks = true
                  )
                </div>
              }
            </td>
          </tr>
          }
          @if(milestones.isEmpty){
          <tr>
            <td style="padding: 20px; background-color: #eee; text-align: center;">
              No milestones to show.
              @if(hasWritePermission){
                <a href="@helpers.url(repository)/issues/milestones/new">Create a new milestone.</a>
              }
            </td>
          </tr>
          }
        </tbody>
      }
    </table>
  }
}
<script>
$(function(){
  $('a.delete').click(function(){
    return confirm('Once you delete this milestone, there is no going back.\nAre you sure?');
  });
});
</script>
